<!--86_3级封闭差动传动比分配-->
<template>
  <div style="width: 100%;height: 100%;overflow-x:hidden;overflow-y:hidden">
    <div style="margin-left: 1%;" class="title">
      <label>3级封闭差动传动比分配</label>
    </div>
    <div class="box1">
      <div class="box2">
        <div class="box3">
          <div style="margin-left: 5px;" class="title">
            <label>输入参数</label>
          </div>
          <div class="box4">
            <div style="width: 100%;height: 12%;display: flex;margin-top: 1%;">
              <div style="width: 25%;text-align: right;">
                <label>总传动比</label>
              </div>
              <div style="width: 15%;text-align: center;">
                <input type="text" value="98" v-model="input.R0">
              </div>
              <div style="width: 20%;text-align: right">
                <button style="width: 25px;" @click="showModal">!</button>
                <a-modal v-model="visible" title="齿数比限制值" @ok="handleOk">
                  <div>
                    <img src="@/assets/image/img_76_4.png" style="width: 100%;" alt="">
                  </div>
                </a-modal>
              </div>
              <div style="width: 15%;text-align: center;">
                <label>不均载系数</label>
              </div>
              <div style="width: 15%;text-align: center;">
                <label>齿数比限制值</label>
              </div>
              <div>
<!--                <button style="width: 25px;">!</button>-->
                <button style="width: 25px;" @click="showModal">!</button>
                <a-modal v-model="visible" title="齿数比限制值" @ok="handleOk">
                  <div>
                    <img src="@/assets/image/img_76_4.png" style="width: 100%;" alt="">
                  </div>
                </a-modal>
              </div>
            </div>
            <div style="width: 100%;height: 12%;display: flex">
              <div style="width: 25%;text-align: right;">
                <label>第1级平行轴宽径比上限值</label>
              </div>
              <div style="width: 15%;text-align: center;">
                <input type="text" value="1" v-model="input.B1min">
              </div>
              <div style="width: 5%;text-align: right;">
              </div>
              <div style="width: 15%;text-align: right;">
                6个行星轮
              </div>
              <div style="width: 15%;text-align: center;">
                <input type="text" value="1" v-model="input.bb1">
              </div>
              <div style="width: 15%;text-align: center;">
                <input type="text" value="3" v-model="input.aa1">
              </div>
            </div>
            <div style="width: 100%;height: 12%;display: flex">
              <div style="width: 25%;text-align: right;">
                <label>第2级平行轴宽径比上限值</label>
              </div>
              <div style="width: 15%;text-align: center;">
                <input type="text" value="1" v-model="input.B2min">
              </div>
              <div style="width: 5%;text-align: right;">
              </div>
              <div style="width: 15%;text-align: right;">
                5个行星轮
              </div>
              <div style="width: 15%;text-align: center;">
                <input type="text" value="1" v-model="input.bb2">
              </div>
              <div style="width: 15%;text-align: center;">
                <input type="text" value="3.7" v-model="input.aa2">
              </div>
            </div>
            <div style="width: 100%;height: 12%;display: flex">
              <div style="width: 25%;text-align: right;">
                <label>第3级平行轴宽径比上限值</label>
              </div>
              <div style="width: 15%;text-align: center;">
                <input type="text" value="1" v-model="input.B3min">
              </div>
              <div style="width: 5%;text-align: right;">
              </div>
              <div style="width: 15%;text-align: right;">
                4个行星轮
              </div>
              <div style="width: 15%;text-align: center;">
                <input type="text" value="1" v-model="input.bb3">
              </div>
              <div style="width: 15%;text-align: center;">
                <input type="text" value="5.7" v-model="input.aa3">
              </div>
            </div>
            <div style="width: 100%;height: 12%;display: flex">
              <div style="width: 25%;text-align: right;">
                <label></label>
              </div>
              <div style="width: 15%;text-align: center;">
              </div>
              <div style="width: 5%;text-align: right;">
              </div>
              <div style="width: 15%;text-align: right;">
                3个行星轮
              </div>
              <div style="width: 15%;text-align: center;">
                <input type="text" value="1" v-model="input.bb4">
              </div>
              <div style="width: 15%;text-align: center;">
                <input type="text" value="11" v-model="input.aa4">
              </div>
            </div>
            <div style="width: 100%;height: 100%;display:flex;">
              <div style="width: 50%;height: 100%;text-align: right;white-space: nowrap;">
                <div style="display: flex;margin-left: 2px;">
                  <div>
                    <input type="text" value="1">
                  </div>
                  <div style="margin-top: 5px;margin-left: 15px;">≤</div>
                  <div style="margin-top: 20px;margin-left: 10px;">
                      <div style="margin-top: -24px;text-align: center">第1级行星轮系外径</div>
                      <div style="margin-top: -13px;">--------------</div>
                      <div style="margin-top: -13px;">第2级行星轮系外径</div>
                  </div>
                  <div style="margin-left: 10px;margin-top: 5px;">≤</div>
                  <div style="margin-left: 15px;">
                    <input type="text" value="1.2">
                  </div>
                </div>
                <div style="display: flex;margin-left: 2px;margin-top: 15px;">
                  <div>
                    <input type="text" value="1">
                  </div>
                  <div style="margin-top: 5px;margin-left: 15px;">≤</div>
                  <div style="margin-top: 20px;margin-left: 10px;">
                    <div style="margin-top: -24px;text-align: center">第2级行星轮系外径</div>
                    <div style="margin-top: -13px;">--------------</div>
                    <div style="margin-top: -13px;">第3级行星轮系外径</div>
                  </div>
                  <div style="margin-left: 10px;margin-top: 5px;">≤</div>
                  <div style="margin-left: 15px;">
                    <input type="text" value="1.2">
                  </div>
                </div>
              </div>
              <div style="width: 50%;height: 100%;margin-left: 20px;overflow-x:auto;overflow-y:auto;">
                <div style="margin-top: 3%;margin-right: 10px;" align="right">
                  <button style="width: 100px;" @click="m">计算</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="margin-left: 10%;width: 25%;">
          <img :src="img" alt="C" style="width: 100%;height: 100%;"/>
        </div>
      </div>
      <div style="margin-left: 5px;" class="title">
        <label>以外径最小为目标函数</label>
      </div>
      <div class="box5">
        <table>
          <tr>
            <th>第1级行星轮系个数</th>
            <th>第2级行星轮系个数</th>
            <th>第3级行星轮系个数</th>
            <th>第1级行星轮系齿数比</th>
            <th>第2级行星轮系齿数比</th>
            <th>第3级行星轮系齿数比</th>
            <th>总体积表征量</th>
            <th>第1级齿圈半径表征量</th>
            <th>第2级齿圈半径表征量</th>
            <th>第3级齿圈半径表征量</th>
            <th>第1级行星轮系齿圈宽径比</th>
            <th>第2级行星轮系齿圈宽径比</th>
            <th>第3级行星轮系齿圈宽径比</th>
            <th>第1级实际最大宽径比</th>
            <th>第2级实际最大宽径比</th>
            <th>第3级实际最大宽径比</th>
            <th>第1级与第2级齿宽比</th>
            <th>第2级与第3级齿宽比</th>
          </tr>
        </table>
        <div class="box6">
          <tr v-for="(item,index2) in ans.rd_matrix" :key="index2">
            <td>{{item[0]}}</td>
            <td>{{item[1]}}</td>
            <td>{{item[2]}}</td>
            <td>{{item[3]}}</td>
            <td>{{item[4]}}</td>
            <td>{{item[5]}}</td>
            <td>{{item[6]}}</td>
            <td>{{item[7]}}</td>
            <td>{{item[8]}}</td>
            <td>{{item[9]}}</td>
            <td>{{item[10]}}</td>
            <td>{{item[11]}}</td>
            <td>{{item[12]}}</td>
            <td>{{item[13]}}</td>
            <td>{{item[14]}}</td>
            <td>{{item[15]}}</td>
            <td>{{item[16]}}</td>
            <td>{{item[17]}}</td>
          </tr>
        </div>
      </div>
      <div style="display: flex;width: 100%;height: 26%;">
        <div style="width: 40%;height: 92%;">
          <div style="margin-left: 5px;" class="title">
            <label>以体积最小为目标函数</label>
          </div>
          <div style="width: 100%;height: 85%;margin-left: 5px;box-shadow: 1.5px 1.5px 2px #aaaaaa;border: 0.5px solid rgba(231, 231, 231, 0.486);border-radius: 3px;">
            <table>
              <tr>
                <th>第1级行星轮系个数</th>
                <th>第2级行星轮系个数</th>
                <th>第3级行星轮系个数</th>
                <th>第1级行星轮系齿数比</th>
                <th>第2级行星轮系齿数比</th>
                <th>第3级行星轮系齿数比</th>
                <th>总体积表征量</th>
              </tr>
            </table>
            <div class="box7" style="overflow: scroll">
              <tr v-for="(item,index3) in ans.rm_matrix" :key="index3">
                <td>{{item[0]}}</td>
                <td>{{item[1]}}</td>
                <td>{{item[2]}}</td>
                <td>{{item[3]}}</td>
                <td>{{item[4]}}</td>
                <td>{{item[5]}}</td>
                <td>{{item[6]}}</td>
              </tr>
            </div>
          </div>
        </div>
        <div style="margin-left: 10px;">
          <img :src="img2" alt="B" style="width: 100%;height: 100%;"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {o3} from "@/api/file";
/*86_3级封闭差动传动比分配*/
export default {
  created () {
    document.title = '三级封闭差动传动比分配' //模块中文名
    this.$store.state.file.key = 86 //设置key为自己的页面编号
  },
  name: "OptiRatio_3stageR_reduction_last",
  data(){
    return{
      params_19:this.$store.state.file.dataList[86],
      input:{
        bb1:"1",  //6个行星轮不均载系数
        bb2:"1",  //5个行星轮不均载系数
        bb3:"1",  //4个行星轮不均载系数
        bb4:"1",  //3个行星轮不均载系数
        aa1:"3",  //6个行星轮齿数比限制值
        aa2:"3.7",  //5个行星轮齿数比限制值
        aa3:"5.7",  //4个行星轮齿数比限制值
        aa4:"11",  //3个行星轮齿数比限制值
        R0:"98",  //总的传动比
        B1min:"1",  //第1级最大宽径比限制值
        B2min:"1",  //第2级最大宽径比限制值
        B3min:"1",  //第3级最大宽径比限制值
/*        B:"1",  //1
        A:"3",  //3.7*/
        ratio_D2_D1_min:"1",  //第1级行星轮齿圈半径与第2级行星轮齿圈半径比值最小值
        ratio_D2_D1_max:"1.2",  //第1级行星轮齿圈半径与第2级行星轮齿圈半径比值最大值
        ratio_D3_D2_min:"1",  //第2级行星轮齿圈半径与第3级行星轮齿圈半径比值最小值
        ratio_D3_D2_max:"1.2",  //第2级行星轮齿圈半径与第3级行星轮齿圈半径比值最大值
      },
      ans:{
        rd_matrix:[[]],
        rm_matrix:[[]]
      },
      visible: false,
      img:require("@/assets/image/img_86_1.png"),
      img2:require("@/assets/image/img_60_2.jpg"),
      form1:{
        el:''
      }
    }
  },
  methods:{
    m(){
      o3(this.input)
          .then(res=>{
            console.log(res);
            this.ans=res;
          })
          .catch(error=>{
            console.log(error);
          });
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
  }
}

</script>

<style scoped>
/**{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}*/
.box1{
  width: 98%;
  height: 95%;
  margin-left: 1%;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.box2{
  height: 45%;
  margin-left: 5px;
  margin-top: 5px;
  margin-right: 5px;
  display: flex;
}
.box3{
  width: 50%;
  height: 100%;
  margin-left: 5px;
  margin-right: 5px;
}
.box4{
  width: 100%;
  height: 90%;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.box5{
  height: 25%;
  margin-left: 5px;
  margin-right: 5px;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
li{
  margin-top: -3px;
  text-align: center;
}
input{
  width: 80px;
  margin-top: 2px;
  text-align: center;
}
.box6{
  margin-left: 5px;
  margin-right: 5px;
  width: 99%;
  height: 60%;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.box6 td{
  width: 5.6%;
  text-align: center;
}
.box7 td{
  width: 16%;
  text-align: center;
}
.box7{
  margin-left: 5px;
  margin-right: 5px;
  width: 98%;
  height: 60%;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}

.div_right_up {
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.title {
  font-size: 17.5px;
  background-color: #D7D7D7;
  border-radius: 3px;
  padding-left: 3%;
  font-weight: bolder;
}
.button{
  background-color: #6dd400;
  border-radius: 4px;
  border: 2px #686868;
}
</style>